<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>菜单</title>
	<link href="css/test_base.css" rel="stylesheet" type="text/css" />
	<link href="css/popnav.css" rel="stylesheet" type="text/css" />
	<link href="http://www.jq-school.com/css/style.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
	<script src="js/jquery.popnav.js"></script>
	<style type="text/css">
	#popnav{
		margin-left:20px;
	}
	</style>
	
	<script type="text/javascript">
	
		function show(arg){
			var s=document.getElementById(arg);
			if(s.style.display=="none"){
				s.style.display="block";
			}
			else{
				s.style.display="none";
			}
		}
	</script>

  

  <body>
      <div id="popnav">
		  <div class="titile" onmousedown="show('box1')" >ABCDE</div>
		  <div class="box" id="box1">
		    <ul class="list">
		      <li class="list-li">
		        <p class="list-p"><a href="###">安徽</a></p>
		        <div class="popbox">
		          <div class="clear-broder"></div>
		          <div class="">
					  <dl class="dl-content-list">
						<dt class="dd-content-list">
    	 					<c:forEach items="${list }" var="s">
    	 						<c:if test="${s.proc=='安徽' }">
    		    					<a href="###">${s.name }<br/></a>
    		    				</c:if>
    						</c:forEach>
						</dt>
			      	  </dl>
				  </div>
		        </div>	  
		      </li>
		      
		      <li class="list-li">
		        <p class="list-p"><a href="###">澳门</a></p>
		        <div class="popbox">
		          <div class="clear-broder"></div>
		          <div class="">
					  <dl class="dl-content-list">
						<dt class="dd-content-list">
							<a href="###">你好</a>	
						</dt>
			  		  </dl>
					  <dl class="dl-content-list">
						<dt class="dd-content-list">
							
						</dt>
					  </dl>
				  </div>
		        </div>  
		      </li>
		      
			  <li class="list-li">
		        <p class="list-p"><a href="###">北京</a></p>  
		      </li>
		
			  <li class="list-li">
		        <p class="list-p"><a href="###">重庆</a></p>  
		      </li>
		        
		    </ul>
		  </div>
		
		  <div class="titile" onmousedown="show('box2')">FGHIJ</div>
		  <div class="box" id="box2">
		    <ul class="list">
		      <li class="list-li">
		        <p class="list-p"><a href="###">福建</a></p>	  
		      </li>
		      
			  <li class="list-li">
		        <p class="list-p"><a href="###">甘肃</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">广东</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">广西</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">贵州</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">海南</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">湖北</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">湖南</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">江苏</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">江西</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">甘肃</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">吉林</a></p>  
		      </li>      
		    </ul>
		  </div>
		
		  <div class="titile" onmousedown="show('box3')">KLMNO</div>
		  <div class="box" id="box3">
		    <ul class="list">
		      <li class="list-li">
		        <p class="list-p"><a href="###">辽宁</a></p>	  
		      </li>
		      
			  <li class="list-li">
		        <p class="list-p"><a href="###">内蒙古</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">宁夏</a></p>  
		      </li>     
		    </ul>
		  </div>
		
		  <div class="titile" onmousedown="show('box4')">PQRST</div>
		  <div class="box" id="box4">
		    <ul class="list">
		      <li class="list-li">
		        <p class="list-p"><a href="###">青海</a></p>	  
		      </li>
		      
			  <li class="list-li">
		        <p class="list-p"><a href="###">山东</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">上海</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">山西</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">四川</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">海南</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">台湾</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">天津</a></p>  
		      </li>      
		    </ul>
		  </div>
		
		  
		
		  <div class="titile" onmousedown="show('box5')">UVWXYZ</div>
		  <div class="box" id="box5">
		    <ul class="list">
		      <li class="list-li">
		        <p class="list-p"><a href="###">香港</a></p>	  
		      </li>
		      
			  <li class="list-li">
		        <p class="list-p"><a href="###">新疆</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">西藏</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">云南</a></p>  
		      </li>
		
			   <li class="list-li">
		        <p class="list-p"><a href="###">浙江</a></p>  
		      </li>      
		    </ul>
		  </div>
		
		</div>
		<script type="text/javascript">
		  $("#popnav").popnav({_event:0});
		  
		 <%-- $(".list-li").mouseover(function(){
		  		var top=$(this).offset().top;
		  		var left=$(this).offset().left;
		  		var width=$(this).width();
		  		var right=left+width;
				console.log(top+","+right);
		  		$(".popbox").style.top=top-10;
		  		$(".popbox").style.right=right+2;
		  });--%>
		</script>
  </body>
</html>
